<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
import { getAlarmDetailApi } from '@/services/alarm'
const props = defineProps<{
  alarmId: number
  title: string
  time: string
}>()
const alarmDetail = ref<string>()
onLoad(() => {
  console.log(props.alarmId, props.title, props.time)
  getAlarmDetail()
})
const getAlarmDetail = async () => {
  const res = await getAlarmDetailApi(props.alarmId)
  alarmDetail.value = res.data
  console.log(alarmDetail.value)
}
const back = () => {
  uni.navigateBack({
    delta: 1,
  })
}
</script>

<template>
  <view class="content">
    <view class="title">
      <u-icon name="arrow-left" color="#ffff" size="22" @click="back"></u-icon>
      警报详情
    </view>
    <view class="alarm-title">{{ props.title }}</view>
    <view class="alarm-time">{{ props.time }}</view>
    <view class="alarm-string">{{ alarmDetail }}</view>
  </view>
</template>

<style lang="scss">
page {
  height: 100%;
  font-family: PingFangSC-regular;
  overflow: hidden;
  .content {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: url(@/static/starry2.png) no-repeat;
    background-size: contain;
    .title {
      position: relative;
      padding-top: 115.385rpx;
      padding-bottom: 28.846rpx;
      font-size: 34.615rpx;
      color: #ffff;
      text-align: center;
      .u-icon {
        position: absolute;
        left: 3%;
      }
    }
    .alarm-title {
      font-size: 34.615rpx;
      margin-left: 38.462rpx;
    }
    .alarm-time {
      font-size: 23.077rpx;
      margin-left: 38.462rpx;
      margin-top: 9.615rpx;
      margin-bottom: 48.077rpx;
      color: #d0d2d1;
      margin-left: 38.462rpx;
    }
    .alarm-string {
      font-size: 26.923rpx;
      margin: 0 38.462rpx;
    }
  }
}
</style>
